<template>
  <!-- 通过判断level是否等于commentIds的长度来判断是否为楼层的顶部，如果是则实行else，不是的就接着递归 -->
  <div class="comment-box clearfix" v-if="level !== commentIds.split(',').length">
    <div class="comment-info clearfix">
        <div class="com_ava lf">
          <!-- <img src="../assets/cat.jpg" class="commenter_avatar"> -->
            <img v-bind:src="commentItem[commentId].user.avatar ? `https://dev.apis.sh/PBX40wgC0/static/${commentItem[commentId].user.avatar}` : avatar" alt="" class="commenter_avatar">
        </div>
        <div class="com_msg lf">
            <span class="user">{{commentItem[commentId].user.nickname}}</span>
            <span class="time">{{formattime(commentItem[commentId].create_time)}}</span>
            <span class="floor-count gt">{{commentItem[commentId].buildLevel}}楼</span>
        </div>
        <div class="com_content clearfix lf">        
          <p class="content lf">
            <span class="content_left">{{commentItem[commentId].content}}</span>
          </p>
          <div class="thumbs_up gt">
            <span class="against">
                <img src="../assets/icon_thumb_down.png" @click="against">
                <span class="badhand">{{commentItem[commentId].against}}</span>
            </span>
            <span class="vote">
                <img src="../assets/icon_thumb_up.png" @click="vote">
                <span class="goodhand">{{commentItem[commentId].vote}}</span>
            </span>
            <span class="reply">
              <img src="../assets/icon_comment.png" @click="reply">
            </span>
          </div>          
          <div v-show="replyShow" class="clearfix">
            <textarea class="replyBox" placeholder="请输入回复内容" v-model="replyValue"></textarea>
            <div class="replyBtn gt">
              <button type="button" class="rep" @click="replyReply" v-show="havenLogin">发表</button>
              <router-link to="/login" class="rep gt" v-show="haveLogin">登录发表</router-link>
            </div>
          </div>
        </div>
    </div>    
    <!-- 此时如果level === 1说明没有更多的楼层，递归结束,否则level-1，接着递归 -->
    <commentBox v-if="level !== 1" v-bind:commentItem="commentItem" v-bind:commentIds="commentIds" :level="level - 1"/>
  </div>
  <!-- 如果是楼层顶部则应用单独的样式 -->
  <div v-else class="comment-item">
    <!-- <img src="../assets/cat.jpg"> -->
    <img :src="commentItem[commentId].user.avatar ? `https://dev.apis.sh/PBX40wgC0/static/${commentItem[commentId].user.avatar}` : avatar" alt="">
    <div class="inner-box">
      <div class="com_title lf">
        <span>{{commentItem[commentId].user.nickname}}</span>
        <span class="time">{{formattime(commentItem[commentId].create_time)}}</span>
        <span class="floor-count gt">{{commentItem[commentId].buildLevel}}楼</span>
      </div>
      <div class="com_header">
        <p class="content">{{commentItem[commentId].content}}</p> 
        <div class="thumbs_up gt">
          <span class="against">
              <img src="../assets/icon_thumb_down.png" @click="against">
              <span class="badhand">{{commentItem[commentId].against}}</span>
          </span>
          <span class="vote">
              <img src="../assets/icon_thumb_up.png" @click="vote">
              <span class="goodhand">{{comment_counts || commentItem[commentId].vote}}</span>
          </span>
          <span class="reply">
            <img src="../assets/icon_comment.png" @click="reply">
          </span>
        </div>
        <div v-show="replyShow" class="clearfix">
          <textarea class="replyBox" placeholder="请输入回复内容" v-model="replyValue"></textarea>
          <div class="replyBtn gt">
            <button type="button" class="rep" @click="replyReply" v-show="havenLogin">发表</button>
            <router-link to="/login" class="rep gt" v-show="haveLogin">登录发表</router-link>
          </div>
        </div>
      </div>
      <!-- 顶楼盖完后递归下一层楼,如果楼层只有一层则递归结束，否则level-1接着递归 -->

      <commentBox v-if="level !== 1" v-bind:commentItem="commentItem" v-bind:commentIds="commentIds" :level="level - 1"/>

    </div>
  </div>
</template>

<script>
// 引入默认头像
import avatar from "../assets/cat.jpg";
import moment from "moment";
import { rate,comment, addComment } from "../api/example.js";
export default {
  // 通过name实现递归调用
  name: "commentBox",
  data() {
    return {
      isShow: true,
      showComment: false,
      replyShow:false,
      replyValue:'',      
      haveLogin:false,
      havenLogin:true,
      newsid:'',
      commentIdsList: [],
      comment_counts:'',
    };
  },
  // 通过props来接收父组件传递过来的参数，名字与父组件中一致，接收到的参数可像data中的变量一样使用
  props: ["commentItem", "commentIds", "level","commentPage"],
  computed: {
    commentId: function() {
      var vm = this;
      // 通过split方法把id字符串切割成对应的数组，然后通过level来取到对应的楼层
      return vm.commentIds.split(",")[vm.level - 1];
    },
    // 通过计算属性返回可在模板中使用的变量
    avatar: function() {
      return avatar;
    }
  },
  created(){
    this.judge();
  },
  mounted(){
    this.getNewsid();
  },
  methods: {
    // 判断是否登录
    judge: function() {
      if (localStorage.newstoken != "undefined") {
        this.isShow = false;        
        this.haveLogin = false;
        this.havenLogin = true;
      } else {
        this.isShow = true;
        this.haveLogin = true;
        this.havenLogin = false;
      }
    },
    getNewsid(){
      this.newsid= this.$route.query.newsId;
    },
    formattime(time) {
      return moment(time).format("YYYY-MM-DD HH:mm:ss");
    },

    // 获取新闻评论列表
    loadComment:function(){
        var vm = this
        this.newsid= this.$route.query.newsId;
        comment(this.newsid,1).then(res =>{
            if(res.data.code==='success'){
                console.log(res.data);
                var data1=res.data.data;
                vm.commentIdsList=data1.commentIds;
                vm.comment_counts=data1.counts;
                vm.commentItem=data1.comments;
                
                // this.$emit( 'onInfinite', [ this.commentItem,this.commentIdsList ] )
            }
        })
    },
    // 点踩
    against() {
      rate(this.commentId, "against").then(res => {
        console.log(this.commentPage)
        if (res.data.code === "success") {
          console.log(res.data);
          console.log(this.newsid);
          alert("点踩成功")
          // this.loadComment();
          // 因为无法取到后台返回的点踩值和点赞值。所以暂时无法做到点赞点踩时的数值改变
        } else {
        }
      });
    },
    // 点赞
    vote() {
      rate(this.commentId, "vote").then(res => {
        if (res.data.code === "success") {
          console.log(res.data);
          console.log(this.newsid);
          alert("点赞成功")
          // this.loadComment();

        } else {

        }
      });
    },
    // 评论评论
    replyReply(){
      this.replyShow = false;
      addComment(this.commentId,this.replyValue).then(res =>{
        if(res.data.code === "success"){
          console.log(res.data);
          alert("评论成功")
          this.loadComment();
        }else{
          console.log(res.data);
          alert(res.data.message);
        }
      })
    },
    // 评论小图标按键
    reply: function() {
      this.replyShow=!this.replyShow;      
    },
  },
  watch:{
    
  }
};
</script>

<style scoped>
.comment-box {
  margin-top: 30px;
  padding: 26px 16px 10px 9px;
  border: 1px solid #adadad;
  background: #f3f3f3;
}
.comment-box .commenter_avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  vertical-align: middle;
}
.comment-item > img {
  float: left;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 12px;
}
.comment-info span,
.inner-box span {
  font-size: 12px;
}
.comment-item .inner-box {
  margin-left: 50px;
}
.time {
  margin-left: 24px;
}
.floor-count {
  float: right;
}
.content {
  display: inline-block;
  margin: 10px 0;
  width: 50%;
}
.thumbs_up {
  margin-top: 10px;
  font-size: 14px;
  color: #6f6f6f;
}
.thumbs_up img {
  width: 25px;
  height: 25px;
  cursor: pointer;
}
.thumbs_up span {
  margin-left: 22px;
}
.thumbs_up .goodhand,
.thumbs_up .badhand {
  border: none;
  color: #6f6f6f;
  margin-left: 6px;
}
.com_ava {
  margin-right: 12px;
}
.com_msg,
.com_content {
  width: 88%;
}
.com_header {
  margin-left: 0;
  width: 98%;
}
.com_title {
  width: 94%;
}
.com_header .replyBox,.comment-info .replyBox{
  display: block;
  width:90%;
  height:114px;
  background: #FCFCFC;
  border: 1px solid #979797;
  margin: 13.5px auto 0;
  resize:none;
  padding:20px 17px;
  font-size: 14px;
  color: #9B9B9B;
}
.replyBtn .rep{
  margin-top: 15px;
  width:110px;
  height:36px;
  line-height: 36px;
  text-align: center;
  background: #FF8000;
  font-size: 16px;
  color: #FFFFFF;
  border:none;
}

</style>